var index=0;
var imgs = document.getElementsByClassName("img");
var dots = document.getElementsByClassName("dots")[0];
var btns = document.getElementsByClassName("btns")[0];
var dotss = dots.children;

var len = imgs.length;  
var timer = null; 
// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()
// 根据图片数量添加相应的小圆点到文档片段中
for (let i=0; i<len; i++){
    const dot = document.createElement("li");
    dot.className = 'quiet';
    frag.appendChild(dot);
}
// 将小圆点片段统一插入到 DOM 结构中
dots.appendChild(frag)
// 第一个小圆点高亮显示
dots.children[0].className = "active";

function ChangeImg() {
    index++;
    if(index>=len) index=0;

    // 循环将全部图片和圆点重置为默认样式
    for(var i=0; i<len; i++){
        imgs[i].style.display='none';
        dotss[i].className = "quiet";
    }

    imgs[index].style.display='block';
    // 将当前圆点添加高亮样式
    dotss[index].className = "active";
}

// 循环添加小圆点的触发事件
for(var i=0; i<len; i++){
    dotss[i].index = i;
    dotss[i].onmouseover = function(){
        for(var j=0; j<len; j++){
            imgs[j].style.display='none';
            dotss[j].className = "quiet";
        }
        this.className = "active";
        index = this.index;
        imgs[index].style.display='block';
    }
}

// 添加事件：鼠标移动到wrapper上，左右切换按钮显示
wrapper.onmouseover = function(){
    clearInterval(timer);
    btns.style.display = 'block';
}
// 添加事件：鼠标移出wrapper，左右切换不按钮隐藏
wrapper.onmouseout = function(){
    timer = setInterval(ChangeImg,2000);
    // btns.style.display = 'none';
}

btns.children[0].onclick = function(){ 
    index--;
    if(index< 0){                              
        index = len-1;
    }

    for(var i=0; i<len; i++){
        imgs[i].style.display='none';
        dotss[i].className = "quiet";
    }

    imgs[index].style.display='block';
    // 将当前圆点添加高亮样式
    dotss[index].className = "active";

}
btns.children[1].onclick = ChangeImg;

//设置定时器，每隔两秒切换一张图片
timer = setInterval(ChangeImg,2000);